{% block component_address_form %}
    {# ludtwig-ignore twig-block-name-snake-case #}
    {% block component_address_form_addressId %}
        {% if data.get('id') %}
            <input type="hidden"
                   name="{{ prefix }}[id]"
                   value="{{ data.get('id') }}">
        {% endif %}
    {% endblock %}

    {% block component_address_form_company %}
        {% if showFormCompany %}
            {% if config('core.loginRegistration.showAccountTypeSelection') %}
                {% set accountTypeRequired = true %}
            {% endif %}

            {% if config('core.loginRegistration.showAccountTypeSelection') or prefix == 'address' or prefix == 'shippingAddress' or hasSelectedBusiness %}
                <div class="{% if prefix == 'shippingAddress' or hasSelectedBusiness %}address-contact-type-company{% elseif prefix == 'address' %}js-field-toggle-contact-type-company d-block {% else %}js-field-toggle-contact-type-company d-none{% endif %}">
                    {% block component_address_form_company_fields %}
                        <div class="row g-2">
                            {% block component_address_form_company_name %}
                                {% if formViolations.getViolations('/company') is not empty %}
                                    {% set violationPath = '/company' %}
                                {% elseif formViolations.getViolations("/#{prefix}/company") is not empty %}
                                    {% set violationPath = "/#{prefix}/company" %}
                                {% endif %}

                                {% set companyValidationRules = (prefix != 'shippingAddress' and accountTypeRequired) ? 'required' : '' %}

                                {# This field is only rendered in the account address editing, if the account type is "commercial". #}
                                {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                                    label: 'address.companyNameLabel'|trans|sw_sanitize,
                                    id: idPrefix ~ prefix ~ '-company',
                                    name: prefix ~ '[company]',
                                    value: data.get('company'),
                                    autocomplete: 'organization',
                                    violationPath: violationPath,
                                    validationRules: companyValidationRules,
                                    additionalClass: 'col-sm-6',
                                } %}
                            {% endblock %}

                            {% block component_address_form_company_department %}
                                {% if formViolations.getViolations('/department') is not empty %}
                                    {% set violationPath = '/department' %}
                                {% elseif formViolations.getViolations("/#{prefix}/department") is not empty %}
                                    {% set violationPath = "/#{prefix}/department" %}
                                {% endif %}

                                {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                                    label: 'address.companyDepartmentLabel'|trans|sw_sanitize,
                                    id: idPrefix ~ prefix ~ '-department',
                                    name: prefix ~ '[department]',
                                    value: data.get('department'),
                                    autocomplete: 'organization',
                                    violationPath: violationPath,
                                    additionalClass: 'col-sm-6',
                                } %}
                            {% endblock %}

                            {# ludtwig-ignore twig-block-name-snake-case #}
                            {% block component_address_form_company_vatId %}
                                {% if prefix == 'address' and showVatIdField %}
                                    {% sw_include '@Storefront/storefront/component/address/address-personal-vat-id.html.twig' with {
                                        vatIds: context.customer.vatIds
                                    } %}
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% endif %}
        {% endif %}
    {% endblock %}

    {% block component_address_form_address_fields %}
        {% set options = {
            scopeElementSelector,
            prefix,
        } %}

        <div class="row g-2">
            {% block component_address_form_street %}
                {% if formViolations.getViolations('/street') is not empty %}
                    {% set violationPath = '/street' %}
                {% elseif formViolations.getViolations("/#{prefix}/street") is not empty %}
                    {% set violationPath = "/#{prefix}/street" %}
                {% else %}
                    {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.streetLabel'|trans|sw_sanitize }) %}
                {% endif %}

                {% set streetAutocomplete = 'address-line1' %}

                {% if prefix == 'shippingAddress' %}
                    {% set streetAutocomplete = 'shipping address-line1' %}
                {% elseif prefix == 'billingAddress' %}
                    {% set streetAutocomplete = 'billing address-line1' %}
                {% endif %}

                {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                    label: 'address.streetLabel'|trans|sw_sanitize,
                    id: idPrefix ~ prefix ~ '-AddressStreet',
                    name: prefix ~ '[street]',
                    value: data.get('street'),
                    autocomplete: streetAutocomplete,
                    violationPath: violationPath,
                    validationRules: 'required',
                    additionalClass: 'col-md-6',
                } %}
            {% endblock %}

            {% block component_address_form_zipcode_city %}
                {% set zipcodeField %}
                    {% set zipcodeValue = formViolations.getInputData()['zipcode'] ?? data.get('zipcode') %}

                    {% if formViolations.getViolations('/zipcode') is not empty %}
                        {% set violationPath = '/zipcode' %}
                    {% elseif formViolations.getViolations("/#{prefix}/zipcode") is not empty %}
                        {% set violationPath = "/#{prefix}/zipcode" %}
                    {% else %}
                        {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.zipcodeLabel'|trans|sw_sanitize }) %}
                    {% endif %}

                    {% set zipCodeAutocomplete = 'postal-code' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set zipCodeAutocomplete = 'shipping postal-code' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set zipCodeAutocomplete = 'billing postal-code' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                        label: 'address.zipcodeLabel'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AddressZipcode',
                        name: prefix ~ '[zipcode]',
                        value: zipcodeValue,
                        autocomplete: zipCodeAutocomplete,
                        violationPath: violationPath,
                        additionalClass: 'col-md-3 col-4',
                        attributes: {
                            'data-input-name': 'zipcodeInput'
                        }
                    } %}
                {% endset %}

                {% set cityField %}
                    {% if formViolations.getViolations('/city') is not empty %}
                        {% set violationPath = '/city' %}
                    {% elseif formViolations.getViolations("/#{prefix}/city") is not empty %}
                        {% set violationPath = "/#{prefix}/city" %}
                    {% else %}
                        {% set requiredMessage = 'error.VIOLATION::IS_BLANK_ERROR'|trans({ '%field%': 'address.cityLabel'|trans|sw_sanitize }) %}
                        {% set violationPath = null %}
                    {% endif %}

                    {% set cityAutocomplete = 'address-level2' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set cityAutocomplete = 'shipping address-level2' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set cityAutocomplete = 'billing address-level2' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                        label: 'address.cityLabel'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AddressCity',
                        name: prefix ~ '[city]',
                        value: data.get('city'),
                        autocomplete: cityAutocomplete,
                        violationPath: violationPath,
                        validationRules: 'required',
                        additionalClass: 'col-md-3 col-8',
                    } %}
                {% endset %}

                {% set wrappedZipcodeField %}
                    {% block component_address_form_zipcode_field %}
                        <div class="form-group col-md-2 col-4">
                            {{ zipcodeField }}
                        </div>
                    {% endblock %}
                {% endset %}

                {% set wrappedCityField %}
                    {% block component_address_form_city_field %}
                        <div class="form-group col-md-4 col-8">
                            {{ cityField }}
                        </div>
                    {% endblock %}
                {% endset %}

                {% block component_address_form_zipcode_city_fields %}
                    {% if config('core.loginRegistration.showZipcodeInFrontOfCity') %}
                        {{ zipcodeField }}
                        {{ cityField }}
                    {% else %}
                        {{ cityField }}
                        {{ zipcodeField }}
                    {% endif %}
                {% endblock %}
            {% endblock %}

            {% block component_address_form_additional_field1 %}
                {% if config('core.loginRegistration.showAdditionalAddressField1') %}
                    {% if formViolations.getViolations('/additionalAddressLine1') is not empty %}
                        {% set violationPath = '/additionalAddressLine1' %}
                    {% elseif formViolations.getViolations("/#{prefix}/additionalAddressLine1") is not empty %}
                        {% set violationPath = "/#{prefix}/additionalAddressLine1" %}
                    {% endif %}

                    {% set additionalFieldOneAutocomplete = 'address-line2' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set additionalFieldOneAutocomplete = 'shipping address-line2' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set additionalFieldOneAutocomplete = 'billing address-line2' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                        label: 'address.additionalField1Label'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AdditionalField1',
                        name: prefix ~ '[additionalAddressLine1]',
                        value: data.get('additionalAddressLine1'),
                        autocomplete: additionalFieldOneAutocomplete,
                        violationPath: violationPath,
                        validationRules: config('core.loginRegistration.additionalAddressField1Required') ? 'required',
                        additionalClass: 'col-md-6',
                    } %}
                {% endif %}
            {% endblock %}

            {% block component_address_form_additional_field2 %}
                {% if config('core.loginRegistration.showAdditionalAddressField2') %}
                    {% if formViolations.getViolations('/additionalAddressLine2') is not empty %}
                        {% set violationPath = '/additionalAddressLine2' %}
                    {% elseif formViolations.getViolations("/#{prefix}/additionalAddressLine2") is not empty %}
                        {% set violationPath = "/#{prefix}/additionalAddressLine2" %}
                    {% endif %}

                    {% set additionalFieldTwoAutocomplete = 'address-line3' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set additionalFieldTwoAutocomplete = 'shipping address-line3' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set additionalFieldTwoAutocomplete = 'billing address-line3' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                        label: 'address.additionalField2Label'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AdditionalField2',
                        name: prefix ~ '[additionalAddressLine2]',
                        value: data.get('additionalAddressLine2'),
                        autocomplete: additionalFieldTwoAutocomplete,
                        violationPath: violationPath,
                        validationRules: config('core.loginRegistration.additionalAddressField2Required') ? 'required',
                        additionalClass: 'col-md-6',
                    } %}
                {% endif %}
            {% endblock %}
        </div>

        <div class="row g-2 country-and-state-form-elements" data-country-state-select="true" data-country-state-select-options="{{ options|json_encode }}">
            {% block component_address_form_country %}
                {% block component_address_form_country_select %}
                    {% if initialCountryId is not defined %}
                        {% set initialCountryId = null %}
                    {% endif %}

                    {% if data.get('countryId') %}
                        {% set initialCountryId = data.get('countryId') %}
                    {% elseif page.countries|length == 1 and disableNonShippableCountries is not defined %}
                        {% set initialCountryId = (page.countries|first).id %}
                    {% endif %}

                    {% if formViolations.getViolations('/countryId') is not empty %}
                        {% set violationPath = '/countryId' %}
                    {% elseif formViolations.getViolations("/#{prefix}/countryId") is not empty %}
                        {% set violationPath = "/#{prefix}/countryId" %}
                    {% endif %}

                    {% set countryAutocomplete = 'country-name' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set countryAutocomplete = 'shipping country-name' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set countryAutocomplete = 'billing country-name' %}
                    {% endif %}

                    {% set countryOptions %}
                        {% if not initialCountryId %}
                            <option value=""
                                    disabled="disabled"
                                    selected="selected">
                                {{ 'address.countryPlaceholder'|trans|sw_sanitize }}
                            </option>
                        {% endif %}
                        {% for country in page.countries %}
                            <option value="{{ country.id }}"
                                    {% if country.id == initialCountryId %}selected="selected"{% endif %}
                                    data-zipcode-required="{{ country.postalCodeRequired }}"
                                    data-vat-id-required="{{ country.vatIdRequired }}"
                                    data-state-required="{{ country.forceStateInRegistration }}"
                                {% if not country.shippingAvailable and disableNonShippableCountries %}disabled="disabled"{% endif %}>

                                {{ country.translated.name }}

                                {% if showNoShippingPostfix and not country.shippingAvailable %}
                                    {{ 'address.countryPostfixNoShipping'|trans|sw_sanitize }}
                                {% endif %}
                            </option>
                        {% endfor %}
                    {% endset %}

                    {% sw_include '@Storefront/storefront/component/form/form-select.html.twig' with {
                        label: 'address.countryLabel'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AddressCountry',
                        name: prefix ~ '[countryId]',
                        autocomplete: countryAutocomplete,
                        options: countryOptions,
                        violationPath: violationPath,
                        validationRules: 'required',
                        additionalClass: 'col-md-6',
                        additionalSelectClass: 'country-select',
                        attributes: {
                            'data-initial-country-id': initialCountryId,
                        }
                    } %}
                {% endblock %}

                {% block component_address_form_state_select %}

                    {% if formViolations.getViolations('/countryStateId') is not empty %}
                        {% set violationPath = '/countryStateId' %}
                    {% elseif formViolations.getViolations("/#{prefix}/countryStateId") is not empty %}
                        {% set violationPath = "/#{prefix}/countryStateId" %}
                    {% endif %}

                    {% set countryStateAutocomplete = 'address-level1' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set countryStateAutocomplete = 'shipping address-level1' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set countryStateAutocomplete = 'billing address-level1' %}
                    {% endif %}

                    {% set countryStateOptions %}
                        <option value=""
                                selected="selected"
                                data-placeholder-option="true">
                            {{ 'address.countryStatePlaceholder'|trans|sw_sanitize }}
                        </option>
                    {% endset %}

                    {% sw_include '@Storefront/storefront/component/form/form-select.html.twig' with {
                        label: 'address.countryStateLabel'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AddressCountryState',
                        name: prefix ~ '[countryStateId]',
                        autocomplete: countryStateAutocomplete,
                        options: countryStateOptions,
                        violationPath: violationPath,
                        additionalClass: 'col-md-6 d-none',
                        additionalSelectClass: 'country-state-select',
                        attributes: {
                            'data-initial-country-state-id': data.get('countryStateId'),
                        }
                    } %}
                {% endblock %}
            {% endblock %}
        </div>

        <div class="row g-2">
            {% block component_address_form_phone_number %}
                {% if config('core.loginRegistration.showPhoneNumberField') %}

                    {% if formViolations.getViolations('/phoneNumber') is not empty %}
                        {% set violationPath = '/phoneNumber' %}
                    {% elseif formViolations.getViolations("/#{prefix}/phoneNumber") is not empty %}
                        {% set violationPath = "/#{prefix}/phoneNumber" %}
                    {% endif %}

                    {% set phoneAutocomplete = 'tel' %}

                    {% if prefix == 'shippingAddress' %}
                        {% set phoneAutocomplete = 'shipping tel' %}
                    {% elseif prefix == 'billingAddress' %}
                        {% set phoneAutocomplete = 'billing tel' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                        label: 'address.phoneNumberLabel'|trans|sw_sanitize,
                        id: idPrefix ~ prefix ~ 'AddressPhoneNumber',
                        name: prefix ~ '[phoneNumber]',
                        value: data.get('phoneNumber'),
                        autocomplete: phoneAutocomplete,
                        violationPath: violationPath,
                        validationRules: config('core.loginRegistration.phoneNumberFieldRequired') ? 'required',
                        additionalClass: 'col-md-6',
                    } %}
                {% endif %}
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}
